<template>

  <!-- pc端 -->
	<header class="header-container header-done">


    <svg @click="visible = true" t="1744797114164" class="munen-left" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9251" width="200" height="200"><path d="M883.2 224.5H144.3c-24.7 0-44.8-20.1-44.8-44.8s20.1-44.8 44.8-44.8h738.9c24.7 0 44.8 20.1 44.8 44.8s-20.1 44.8-44.8 44.8zM883.2 549.2H144.3c-24.7 0-44.8-20.1-44.8-44.8 0-24.7 20.1-44.8 44.8-44.8h738.9c24.7 0 44.8 20.1 44.8 44.8 0 24.7-20.1 44.8-44.8 44.8zM883.2 873.8H144.3c-24.7 0-44.8-20.1-44.8-44.8s20.1-44.8 44.8-44.8h738.9c24.7 0 44.8 20.1 44.8 44.8s-20.1 44.8-44.8 44.8z" fill="#333333" p-id="9252"></path></svg>

    <!-- pc端栏目 -->
    <div class="header-containernav">

		<div class="header-container-left">
			<router-link to="/"><img class="logo" src="/logo.png" /></router-link>


    <div class="navigations">
      <input placeholder="Please enter the search product name"  @keyup.enter="handleSearch" v-model="searchKeyword"  />
      <button @click="handleSearch">
        <svg t="1747989265619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10596" width="20" height="20"><path d="M475.3 863.3c-209.7 0-380.2-170.6-380.2-380.2s170.6-380.2 380.2-380.2 380.2 170.6 380.2 380.2c0 209.7-170.6 380.2-380.2 380.2z m0-677.1c-163.7 0-296.9 133.2-296.9 296.9S311.6 780 475.3 780s296.9-133.2 296.9-296.9S639 186.2 475.3 186.2z" fill="#fff" p-id="10597"></path><path d="M886.3 926.2c-10.3 0-20.5-3.8-28.6-11.4L685.9 752.7c-16.7-15.8-17.5-42.1-1.7-58.9 15.8-16.7 42.1-17.5 58.9-1.7L915 854.3c16.7 15.8 17.5 42.1 1.7 58.9-8.2 8.6-19.3 13-30.4 13z" fill="#fff" p-id="10598"></path></svg>
      </button>
    </div>



    </div>


    <!-- 是否登录 -->
		<div class="header-container-right">



			<router-link v-if="!usernfo.getUser()" to="/Signin">
        <svg t="1744608526773" class="image-ico-header" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4980">
          <path d="M511.3 615.2c-152 0-275.7-123.7-275.7-275.7S359.3 63.9 511.3 63.9 787 187.5 787 339.5 663.3 615.2 511.3 615.2z m0-454.8c-98.8 0-179.2 80.4-179.2 179.2s80.4 179.2 179.2 179.2 179.2-80.4 179.2-179.2-80.4-179.2-179.2-179.2z" fill="#333333" p-id="8995"></path>
          <path d="M852.5 956.3c-26.6 0-48.2-21.6-48.2-48.2 0-161.5-131.4-292.9-292.9-292.9-161.5 0-292.9 131.4-292.9 292.9 0 26.6-21.6 48.2-48.2 48.2s-48.2-21.6-48.2-48.2c0-214.7 174.7-389.4 389.4-389.4s389.4 174.7 389.4 389.4c-0.2 26.6-21.8 48.2-48.4 48.2z" fill="#333333" p-id="8996"></path>
        </svg>Signin
      </router-link>

      <router-link v-if="usernfo.getUser()" to="/Myhome">
        <div class="face">{{ usernfo.getUser().first }}</div>
        <div class="facename">{{ usernfo.getUser().email }}</div>
      </router-link>

		</div>


    </div>

    <nav>

      <div  class="list">
        <router-link :to="'/lists/' + item.id" v-for="item in useConfig().tree" :key="item.id" :class="item.id==props.topId ? 'on' : ''">{{item.title}}</router-link>
      </div>

       <div class="tips">
        <svg t="1744973205026" class="secure-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9225" width="20" height="20"><path d="M509.8 959.6c-34.4 0-68.8-8.7-99.5-26.2L200.5 814.1C134.1 776.3 92.9 704.4 92.9 626.2V272.5c0-58.3 39.3-109.7 95.5-125.1l287.7-78.7c22.1-6 45.4-6 67.5 0l287.8 78.7c56.2 15.4 95.5 66.8 95.5 125.1v353.7c0 78.1-41.2 150.1-107.6 187.9l-210 119.3c-30.7 17.4-65.1 26.2-99.5 26.2z m0-798.6c-2.8 0-5.5 0.4-8.2 1.1l-287.7 78.7c-14.3 3.9-24.2 16.9-24.2 31.7v353.7c0 43.4 22.5 83.1 58.7 103.7l209.8 119.3c31.9 18.1 71.5 18.1 103.3 0l209.8-119.3c36.2-20.6 58.7-60.3 58.7-103.7V272.5c0-14.8-10-27.8-24.2-31.7L518 162.1c-2.6-0.7-5.4-1.1-8.2-1.1z" fill="#ffffff" p-id="9226"></path><path d="M630.8 536.7H388.9c-26.7 0-48.4-21.7-48.4-48.4s21.7-48.4 48.4-48.4h241.9c26.7 0 48.4 21.7 48.4 48.4s-21.7 48.4-48.4 48.4z" fill="#ffffff" p-id="9227"></path><path d="M509.8 657.6c-26.7 0-48.4-21.7-48.4-48.4V367.3c0-26.7 21.7-48.4 48.4-48.4s48.4 21.7 48.4 48.4v241.8c0 26.8-21.6 48.5-48.4 48.5z" fill="#ffffff" p-id="9228"></path></svg>
        100% SECURE
      </div>
		</nav>

	</header>

  <!-- 手机端 -->
  <el-drawer v-model="visible" :show-close="false" direction="ltr" size="100%">
    <template #header="{ close }">
      <svg @click="close" t="1744799118070" class="close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9161"><path d="M639.6 685.9c-11.5 0-22.9-4.4-31.7-13.1L351.2 416c-17.5-17.5-17.5-45.9 0-63.4s45.9-17.5 63.4 0l256.7 256.7c17.5 17.5 17.5 45.9 0 63.4-8.8 8.8-20.3 13.2-31.7 13.2z" fill="#333333" p-id="9162"></path><path d="M382.8 685.9c-11.5 0-22.9-4.4-31.7-13.1-17.5-17.5-17.5-45.9 0-63.4l256.7-256.7c17.5-17.5 45.9-17.5 63.4 0s17.5 45.9 0 63.4L414.5 672.7c-8.7 8.8-20.2 13.2-31.7 13.2z" fill="#333333" p-id="9163"></path><path d="M511.2 960.7c-114.8 0-229.5-43.7-316.9-131.1-174.8-174.8-174.8-459.1 0-633.9C369 21 653.4 21 828.1 195.8c174.8 174.8 174.8 459.1 0 633.9-87.3 87.3-202.1 131-316.9 131z m0-806.4c-91.8 0-183.6 35-253.5 104.8-139.8 139.8-139.8 367.3 0 507.1s367.3 139.8 507.1 0 139.8-367.3 0-507.1C694.9 189.3 603 154.3 511.2 154.3z m285.3 643.6h0.2-0.2z" fill="#333333" p-id="9164"></path></svg>
    </template>

    <!-- 手机端：栏目 -->
    <div class="show-main">
      <el-collapse  @change="handleChange">

        <el-collapse-item :title="item.title" :name="idx+1" v-for="(item, idx) in useConfig().tree" :key="idx">
          <div class="collapse-item-all fw700">
            <router-link :to="'/lists/' + item.id" target="_blank">All</router-link>
            <!-- 子栏目：循环 -->
            <router-link :to="'/lists/' + it.id"  v-for="it in item.children" :key="it.id" target="_blank">{{it.title}}</router-link>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

  </el-drawer>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CollapseModelValue } from 'element-plus'
import { useConfig } from '../stores/config'
import { useUserInfo } from '../stores/userInfo'
import createAxios from '../utils/axios'

const visible = ref(false)

const usernfo = useUserInfo()


const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}


    // 获取商品列表
const handleSearch = ()=>{
      createAxios({
          url: '/frontend/goods/lists',
          method: 'post',
          data: {keyword: this.searchKeyword},
        },
        {
            showSuccessMessage: false,
        })
        .then((res) => {
            console.log('列表请求结果', res)
            this.lists = res.data.list
        })
        .catch(() => {
        })
    }

// 定义 props 后，剩余特性会自动透传
const props = defineProps({
  topId: String
})


</script>

<style>
.navigations {
    margin-left: 20px;
    display: flex;
    padding: 0 6px 0 20px;
    line-height: 30px;
      border-radius: 50px;
      border: 1px solid #333;
      display: flex;
      justify-content: space-between;

      cursor: pointer;
    input {
      border: 0;
      outline:medium;
      width: 600px;
    }
    button {
      cursor: pointer;
      border: 0;
      background: #000;
      margin: 3px 0 0 0;
      height: 32px;
      width: 48px;
      border-radius: 100px;
    }


  }
.header-container {
  	-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .05);
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .05);
	background-color: #fff;
  min-width: 1000px;
  margin: 0 auto;
	top: 0;
	position: fixed;
	right: 0;
	left: 0;
	z-index: 1000;
	padding: 20px 5% 14px 5%;
	line-height: 40px;
  nav {
    padding-top: 20px;
    font-size: 16px;
   display: flex;
    justify-content: space-between;
    .list {
    display: flex;
      }
    a {
    font-weight: 700;
      margin-right: 40px;
    }
    a:hover {
      color: #fd384f;
    }
    a.on {
      color: #fd384f;

    }
    .tips {
      background-color: #000000;
      border-radius: 20px;
      padding: 0 40px;
      font-size: 12px;
      color: #ffffff;
      white-space: nowrap;
      align-items: center;
      display: flex;
      .secure-icon {
        margin-right: 4px;
      }
    }
  }
  .header-containernav {
	display: flex;
	justify-content: space-between;
  }
   .munen-left {
    display: none;
  }

	.header-container-left {
		display: flex;
		.logo {
			width: 152px;
			height: 40px;
		}
	}

	.header-container-right {
    .face {
      border: 2px solid #333333;
      color: #333333;
      width: 24px;
      height: 24px;
      border-radius: 100px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
    }
    .facename {
      margin-left: 10px;
    }
		display: flex;
		a {
			font-weight: 700;
			display: flex;
      align-items:center;
		}
    img {
      width: 20px;
      height: 20px !important;
      border-radius: 100px;
      margin: 10px 4px 0 0;
    }
		a:hover {
				margin: 0 0 0 10px;
      color: #666;
		}
		.image-ico-header {
			width: 28px;
			height: 28px;
			margin-right: 4px;
		}

	}
}

@media only screen and (max-width: 1000px) {

  nav {
    display: none !important;
  }

 .navigations {
   display: none;
    }
  .el-drawer__header {
    text-align: right;
    display: block;
    margin-bottom: 0px;
  }
  .el-drawer__body {
    padding-top: 0;
  }
  .el-collapse {
    border-top: 0;
    .el-collapse-item__header {
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      font-weight: 700;
      border-bottom: 0;
      margin-top: 10px;
    }
    .el-collapse-item__arrow {
      font-size: 12px;
    }
    .collapse-item-all {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      a {
        background-color: #fafafa;
        width: 42%;
        padding: 3%;
        margin: 5px 0;
        display: block;
        font-size: 14px;
        color: #666666;
      }
    }
   }
  .close-icon {
    width: 24px;
    height: 24px;
  }
  .header-container {
    padding: 20px 5%;
    min-width:90%;
    width: 90%;
    line-height: 30px;
    .munen-left {
      display: block;
      width: 30px;
      height: 30px;
      position: absolute;
    }
    .header-container-left {
      width: 100%;
      text-align: center;
      a {
        margin: 0 auto;
      }
      .logo {
        width: 114px ;
        height: 30px;
      }
    }
    .header-container-left .fw700 {
      display: none !important;

    }
  }
  .header-container-right {
    .facename {
    display: none;
    }
    position: absolute;
    right: 5%;
    img {
      margin-top: 5px !important;
    }
  }

}
</style>
